<template>
  <div id="app" class="index">
    <van-tabs v-model="active" sticky fixed>
      <van-tab
        v-for="channel in channelsData"
        :title="channel.name"
        :key="channel.id"
      >
        <article-list
          :channel="channel.id"
          ref="article"
          @changeMore="hMoreBtn"
        ></article-list>
      </van-tab>
    </van-tabs>
    <!-- 频道列表 开关 通过定位 通过它打开频道管理的弹层 -->
    <div class="bar-btn" @click="showChannelEdit = true" v-if="$store.getters.isLogin" >
      <van-icon name="wap-nav" />
    </div>
    <!-- 弹层（更多操作） -->
    <van-popup v-model="showMoreAction" :style="{ width: '80%' }">
      <more-action
        ref="more"
        @report="hReport"
        @uninterested="hUninterested"
      ></more-action>
    </van-popup>
    <!-- 频道管理 -->
    <van-action-sheet v-model="showChannelEdit" @close="$refs.channelEdit.editing = false" title="频道管理">
      <channel-edit :channelList="channelsData" ref="channelEdit" :curIndex="active" @update-cur-index='hUpdateCurIndex'></channel-edit>
    </van-action-sheet>
  </div>
</template>
<script>
import { getChannels } from '@/api/channels'
import { dislikes, report } from '@/api/article'
import ArticleList from './articleList.vue'
import MoreAction from './moreAction.vue'
import channelEdit from './channelsEdit.vue'
export default {
  name: 'Home',
  components: { ArticleList, MoreAction, channelEdit },
  data () {
    return {
      channelsData: [], // 频道列表
      active: 0, // 当前频道
      showMoreAction: false, // ---更多操作.弹框显示状态
      showChannelEdit: false, // --频道管理.弹框显示状态
      isShowChannelEdit: false, // 是否显示频道编辑弹层
      articleId: null
    }
  },
  methods: {
    async mGetchannelsList () {
      try {
        const { data } = await getChannels()
        this.channelsData = data.channels
      } catch (err) {
        console.log(err, '获取频道列表错误')
      }
    },
    async hUninterested () {
      // 对文章不感兴趣
      try {
        await dislikes({ target: this.articleId })
        this.showMoreAction = false
        this.$toast.success('操作成功')
        this.$refs.article[0].delArticle(this.articleId) // 删除子组件的对应文章
      } catch (err) {
        this.$toast.fail('操作失败')
        console.log('文章操作失败', err)
      }
    },
    async hReport (type) {
      // 举报文章
      try {
        await report({ target: this.articleId, type })
        this.showMoreAction = false
        this.$toast.success('举报成功')
        this.$refs.article[0].delArticle(this.articleId) // 删除子组件的对应文章
      } catch (err) {
        this.$toast.fail('举报失败')
        console.log('举报操作失败', err)
      }
    },
    hMoreBtn (id) { // 更多操作
      this.showMoreAction = !this.showMoreAction
      this.articleId = id
      if (this.$refs.more) this.$refs.more.isReport = false
    },
    hUpdateCurIndex (curIndex, isEdit) { // 切换当前频道
      if (!isEdit) this.showChannelEdit = false
      this.active = curIndex
    }

  },
  mounted () {
    this.mGetchannelsList()
  }
}
</script>
<style lang="less" scoped>
.bar-btn {
  position: fixed;
  right: 5px;
  top: 57px;
  display: flex;
  align-items: center;
  background-color: #fff;
  opacity: 0.8;
  z-index: 1;
  .van-icon-wap-nav {
    font-size: 20px;
  }
}
</style>
